/*
 * Created: 2022-09-12 14:43:29
 * Author : 涛涛涛
 */

//! 如果要使用一些class的生命周期,直接使用高阶组件来完成
// 导出配置,写在此处,其实嘛也没有
definePageConfig({});
import React, { FC } from 'react';
import { View, Text } from '@tarojs/components';
import { styled } from 'linaria/react';
import { useClassName } from '@/utils/index';
import { HomeSearchContext } from './HomeSearchContext';
import { useSearchReducer } from './useSearch';
import RootPageComponent from '@/pages/components/RootPageComponent/RootPageComponent';
import SearchInput from './SearchInput/SearchInput';
import HistoryRecord from './HistoryRecord/HistoryRecord';
import KeywordsMatchedRecord from './KeywordsMatchedRecord/KeywordsMatchedRecord';
import Loading from '@/pages/HomeSearch/components/Loading/Loading';
import RecordCard from '@/pages/HomeSearch/components/RecordCard/RecordCard';
import NoRecord from '@/pages/HomeSearch/components/NoRecord/NoRecord';
export interface IProps extends ICompProps {}
HomeSearch.defaultProps = {} as Partial<IProps>;
function HomeSearch(props: IProps) {
    const { className, style } = props;
    const localClassName = useClassName('HomeSearch', className);
    const { searchReducer, searchDispatch, fetchProductList } = useSearchReducer();
    return (
        <HomeSearchContext.Provider value={{ searchReducer, searchDispatch, fetchProductList }}>
            <RootView className={localClassName} style={style}>
                <RootPageComponent
                    headNavLeftShow="arrow"
                    headNavContentRightSlot={
                        <SearchInput onClear={() => searchDispatch({ type: 'setKeywords', payload: '' })} />
                    }>
                    <RecordCard>
                        {searchReducer.status === 'loading' && <Loading />}
                        {searchReducer.status === 'history' && <HistoryRecord />}
                        {searchReducer.status === 'list' && <KeywordsMatchedRecord />}
                        {searchReducer.status === 'nothing' && <NoRecord />}
                    </RecordCard>
                </RootPageComponent>
            </RootView>
        </HomeSearchContext.Provider>
    );
}
export default React.memo(HomeSearch as FC<IProps>);

const RootView = styled(View)`
    &.HomeSearch {
    }
`;
